<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/global.js"></script>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link href="style.css" rel="stylesheet" />
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">未来72小时天气预报</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<div class="mui-row m-row">
					<h5 class="mh m-address">贵阳绕城高速</h5>
				</div>
				
				<div id="detailBox" style="overflow-y: hidden;">
				</div>
			</div>
		</div>
		
		<script>
			mui.init();
			mui.plusReady(function(){
				var self=plus.webview.currentWebview();
				var lng=self.lng;
				var lat=self.lat;
				var code=self.code;
				var forcastId=self.forcastId;
				
				function returnDom(weatObj){
					var date=new Date(weatObj.time.replace(/-/g,"/"));
					var wind=getWinD(weatObj.wd,weatObj.ws);
					var weatherInfo=getWeatherStr(weatObj.rain,weatObj.snow,weatObj.cloud);
					var resDom='<div class="mui-row mh m-row" style="padding: 5px;margin-top: 8px;">'+
						'<div class="m-weather-info-box" style="width: 20%;border-right: 2px solid #AAB8D2;">'+
							'<div style="color: #AAB8D2;font-size: 13px;">'+(date.getMonth()+1)+'/'+date.getDate()+'</div>'+
							'<div style="color: #AAB8D2;font-size: 13px;">'+date.getHours()+'时</div>'+
						'</div>'+
						'<div class="m-weather-info-box" style="width: 20%;">'+
							'<img src="../../'+weatherInfo.src+'" style="width: 50%;height: 50%;"/>'+
						'</div>'+
						'<div class="m-weather-info-box" style="width: 17%;">'+
							'<div style="font-size: 13px;">'+weatObj.temp+'℃</div>'+
							'<div style="font-size: 13px;">'+weatObj.rh+'%</div>'+
						'</div>'+
						'<div class="m-weather-info-box" style="width: 17%;">'+
							'<div style="font-size: 13px;">'+weatObj.vis+'公里</div>'+
							'<div style="font-size: 13px;">'+weatObj.p+'KPa</div>'+
						'</div>'+
						'<div class="m-weather-info-box" style="width: 26%;">'+
							'<div style="font-size: 13px;">'+wind.wd.text+'风&lt;'+wind.ws.level+'级</div>'+
						'</div>'+
					'</div>';
					
					return resDom;
				}
				
				var detailBox=document.getElementById('detailBox');
				mui.ajax(
					FORCAST_DATA,
					{
						data:{
							lng:lng,
							lat:lat,
							level:3
						},
						dataType:'json',
						type:'get',
						success:function(data){
							var mdata=data.obj.data;
							var domText='';
							for(var i=0;i<mdata.length;i++){
								domText+=returnDom(mdata[i]);
							}
							detailBox.innerHTML=domText;
						},
						error:function(xhr,type,error){
							mui.toast("服务器断开，请联系管理员。code："+type)
						}
					}
				)
			});
			
		</script>
	</body>
</html>
